<template>
  <div class="app-container">

    <u-page title="美陈需求项目维护">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="物料名称" prop="popname">
            <el-input v-model="listQuery.popname" placeholder="请输入物品名称" style="width: 280px" clearable  />
          </el-form-item>
          <el-form-item label="物料类型" prop="itemtype">
            <el-select v-model="listQuery.itemtype" placeholder="请选择物品类型"  clearable>
              <el-option v-for="item in itemList" :key="item.value" :label="item.label"  :value="item.value" clearable />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" style="margin-left: 20px" @click="handleAddPopInfo">新增</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right >
          <el-table-column label="操作" align="center" fixed="right" >
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>
    <!--  弹窗 -->
    <el-drawer
      title="维护信息"
      :visible.sync="adinfotable"
      direction="rtl"
      size="50%"
    >
      <div style="margin-top: 5px;padding-left: 10px">
        <el-form ref="popformrules" :model="popform" :rules="popformrules">
          <el-row>
              <el-form-item label="物料名称" prop="popname">
                <el-input v-model="popform.popname" autocomplete="off" style="width: 200px" />
              </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="物料类型" prop="itemtype">
              <el-radio-group v-model="popform.itemtype" @change="itemtypeChange()">
                <el-radio label="POP" />
                <el-radio label="美陈物料" />
              </el-radio-group>
            </el-form-item>

          </el-row>
          <el-row v-if="popform.itemtype==='POP'">
            <el-form-item label="物料规格" prop="poptype">
              <el-radio-group v-model="popform.poptype">
                <el-radio label="急件" />
                <el-radio label="普件" />
              </el-radio-group>
            </el-form-item>

          </el-row>
          <el-row v-if="popform.itemtype==='美陈物料'">
            <el-form-item label="物料规格" prop="poptype">
              <el-input v-model="popform.poptype" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="单价" prop="amount">
              <el-input v-model="popform.amount" autocomplete="off" style="width: 200px" />
            </el-form-item>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="onSave('popformrules')">保存</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      api: this.$u.api.OpcenPops,
      typeList: [{ value: '急件', label: '急件' }, { value: '普件', label: '普件' }],
      itemList: [{ value: 'POP', label: 'POP' }, { value: '美陈物料', label: '美陈物料' }],
      // 楼层
      floors: [],
      adinfotable: false,
      listOptions: {
        mutiSelect: true,
        stripe: true
      },
      listLoading: false,
      list: [],
      popform: {
        id: '',
        updateflag: false,
        popname: '',
        poptype: '',
        amount: 0
      },
      formLabelWidth: '80px',
      // 表格
      columns: [
        {
          prop: 'popname',
          label: '物品名称'
        },
        {
          prop: 'poptype',
          label: '物品类型'
        },
        {
          prop: 'amount',
          label: '单价'
        }
      ],
      listQuery: {
        page: 1,
        pageSize: 20,
        totalCount: 1,
        poptype: '',
        popname: ''
      },
      // 规则
      popformrules: {
        popname: [
          { required: true, message: '请填写名称', trigger: 'blur' }
        ],
        poptype: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请填写单价', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAddPopInfo() {
      this.popform.updateflag = false
      const self = this
      self.adinfotable = true
    },
    itemtypeChange(){
      this.popform.poptype = ''
    },
    cancelForm() {
      const self = this
      self.adinfotable = false
    },
    handleFilter() {
      this.hdlFilter()
    },
    // 编辑
    handleEdit(row) {
      const self = this
      self.popform = row
      self.adinfotable = true
      this.popform.updateflag = true
    },
    // 删除
    handleDelete(row) {
      const self = this
      self.api.delete(row.id).then(res => {
        // 通知信息
        self.$u.msg('删除成功！')
        this.hdlFilter()
      }).catch(() => {
        self.$u.msg('删除失败，请重试或联系管理员')
        return
      })
    },
    // 保存
    onSave(formName) {
      const self = this
      // 表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 通过验证进行提交动作
          self.api.save(self.popform).then(res => {
            // 通知信息
            self.$u.msg(res.msg)
          }).catch(() => {
            return
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.el-select .el-input {
  width: 220px;
}
</style>
<style lang="scss" scoped>
.app-container{
}
</style>
